<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景区领导决策-游客画像</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/page.css">
</head>

<body>
    <div class="box">
        <div class="header head-font">游客画像</div>

        <ul class="content-box">
            <li>
                <h3 class="title tit-font">年龄性别占比</h3>
                <div class="my-chart">
                    <div class="chart-child1" id="myChart5-1"></div>
                    <div class="chart-child2" id="myChart5-2"></div>
                </div>
            </li>
            <li>
                <div class="title tit-font">
                    <h3>客源地分析</h3>
                    <div class="right-box" id="city-change">
                        <span class="active"><i>国内</i></span>
                        <span><i>省内</i></span>
                    </div>
                </div>
                <div class="my-chart"" id="myChart6"></div>
            </li>
        </ul>
    </div>
    <script src="../plugin/ECharts/echarts.js"></script>
    <script src="../plugin/jquery-1.11.1.min.js"></script>
    <script>
       var cityDat = ['重庆', '宁夏', '温州', '海南', '山东', '河北', '上海', '北京', '山西', '河南']
       var dataNum = [5984, 6543, 7542, 8463, 9846, 10546, 12654, 14682, 16542, 18462]
       $('#city-change>span').click(function(){
        $(this).addClass('active').siblings('span').removeClass('active')
        let index=$(this).index()
        if(index==0){
            cityDat = ['重庆', '宁夏', '温州', '海南', '山东', '河北', '上海', '北京', '山西', '河南']
            dataNum = [5984, 6543, 7542, 8463, 9846, 10546, 12654, 14682, 16542, 18462]
            drawLine6()
        }
        if(index==1){
            cityDat = ['周口', '商丘', '开封', '安阳', '信阳', '南阳', '洛阳', '新乡', '焦作', '郑州']
            dataNum = [5284, 6043, 7042, 8063, 9046, 9546, 10654, 12682, 14542, 16462]
            drawLine6()
        }
       })
        function drawLine5_1() {
           let data = [
                { name: '18岁以下', value: 7 },
                { name: '18-24', value: 25 },
                { name: '25-39', value: 21 },
                { name: '40-59', value: 18 },
                { name: '60以上', value: 14 }
            ]
            var color = {
                start: ['#2EA6FF', '#9A4CFB', '#FF6488', '#00E4FF', '#53FCB3'],
                end: ['#fff', '#fff', '#fff', '#fff', '#fff']
            }
            var seriesData = data.map((item, index) => {
                return {
                    name: item.name,
                    value: item.value,

                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
                                offset: 0,
                                color: color.start[index]
                            }, {
                                offset: 1,
                                color: color.end[index]
                            }])
                        }
                    }
                }
            })
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('myChart5-1'))
            // 绘制图表
            var option = {
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '65%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: function (params) {
                                    if (params.dataIndex === 0) {
                                        return '{color1|' + params.value + '%}' + '\n{black|' + params
                                            .name + '}'
                                    } else if (params.dataIndex === 1) {
                                        return '{color2|' + params.value + '%}' + '\n{black|' + params
                                            .name + '}'
                                    } else if (params.dataIndex === 2) {
                                        return '{color3|' + params.value + '%}' + '\n{black|' + params
                                            .name + '}'
                                    } else if (params.dataIndex === 3) {
                                        return '{color4|' + params.value + '%}' + '\n{black|' + params
                                            .name + '}'
                                    } else if (params.dataIndex === 4) {
                                        return '{color5|' + params.value + '%}' + '\n{black|' + params
                                            .name + '}'
                                    }
                                },
                                rich: {
                                    black: {
                                        color: '#666',
                                        lineHeight: 20,
                                        padding: [5, -30],
                                        textAlign: 'left',
                                        fontSize: '14px',
                                        fontFamily: 'PingFangSC'
                                    },
                                    color1: {
                                        padding: [5, -30],
                                        textAlign: 'left',
                                        fontWeight: 700,
                                        fontFamily: 'PingFangSC',
                                        color: '#2EA6FF'
                                    },
                                    color2: {
                                        padding: [5, -30],
                                        textAlign: 'left',
                                        fontWeight: 700,
                                        fontFamily: 'PingFangSC',
                                        color: '#9A4CFB'
                                    },
                                    color3: {
                                        padding: [5, -30],
                                        textAlign: 'left',
                                        fontWeight: 700,
                                        fontFamily: 'PingFangSC',
                                        color: '#FF6488'
                                    },
                                    color4: {
                                        padding: [5, -30],
                                        textAlign: 'left',
                                        fontWeight: 700,
                                        fontFamily: 'PingFangSC',
                                        color: '#00E4FF'
                                    },
                                    color5: {
                                        padding: [5, -30],
                                        textAlign: 'left',
                                        fontWeight: 700,
                                        fontFamily: 'PingFangSC',
                                        color: '#53FCB3'
                                    }
                                }

                            }
                        }
                    },
                    labelLine: {
                        length: 20,
                        length2: 40
                    },
                    data: seriesData
                }]
            }
            myChart.setOption(option)
        }

        function drawLine5_2() {
            var symbols = [
                'path://M115.3,45.3H104c5.7-1.9,9.8-7.2,9.8-13.5c0-7.8-6.4-14.2-14.2-14.2c-7.8,0-14.2,6.4-14.2,14.2c0,6.3,4.1,11.6,9.8,13.5  H83.8c-10,0-18.3,8.1-18.3,18.2v44c0,3.4,2.7,6.2,6.1,6.2c3.4,0,6.2-2.8,6.2-6.2V67.9H81v110.5c0,4.6,3.8,8.3,8.4,8.3  c4.6,0,8.3-3.7,8.3-8.3v-64.1h3.4v64.1c0,4.6,3.7,8.3,8.3,8.3c4.6,0,8.4-3.7,8.4-8.3V67.9h3.2v39.7c0,3.4,2.8,6.2,6.2,6.2  s6.1-2.8,6.1-6.2v-44C133.6,53.5,125.4,45.3,115.3,45.3z',
                'path://M135.6,99.4l-11.4-39.7c-4.6-15.9-17.8-15.4-17.8-15.4h-5.2c5.1-2.2,8.6-7.3,8.6-13.1c0-8-6.5-14.4-14.5-14.4  c-8,0-14.5,6.4-14.5,14.4c0,5.9,3.5,10.9,8.6,13.1h-5.1c0,0-13.3-0.5-17.8,15.4L55,99.4c-1.1,3.7,1,6.5,4.2,7.5  c3.2,0.9,6.5-0.7,7.4-3.7l11.1-38.7h3l-19.2,67h18.1v49.1c0,3.7,3.2,6.9,7.1,6.9c3.5,0,7.1-3.5,7.1-7.2v-48.8h2.9v48.8  c0,3.7,3.6,7.2,7.1,7.2c3.9,0,7.1-3.1,7.1-6.9v-49.1H129l-19.2-67h3l11.1,38.7c0.8,3,4.2,4.6,7.4,3.7  C134.6,105.9,136.6,103.1,135.6,99.4z',
            ];

            var bodyMax = 100

            var labelSetting = {
                normal: {
                    show: true,
                    position: 'bottom',
                    offset: [0, 0],
                    formatter: function (param) {
                        return (param.value / bodyMax * 100).toFixed(0) + '%'
                    },
                    textStyle: {
                        fontSize: 12,
                        fontFamily: 'Arial'
                    }
                }
            }

            var markLineSetting = {
                symbol: 'none',
                lineStyle: {
                    opacity: 0.3
                }
            }
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('myChart5-2'))
            // 绘制图表
            var option = {
                xAxis: {
                    data: ['男', '女'],
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                yAxis: {
                    show: false,
                    max: bodyMax,
                    offset: 20,
                    splitLine: {
                        show: false
                    }
                },
                grid: {
                    top: '5%',
                    left: '15%',
                    height: 70,
                    width: 70
                },
                // markLine: {
                //     z: -100
                // },
                series: [{
                        name: 'typeA',
                        type: 'pictorialBar',
                        symbolClip: true,
                        symbolBoundingData: bodyMax,
                        label: labelSetting,
                        data: [{
                                value: 40,
                                symbol: symbols[0],
                                itemStyle: {
                                    color: '#2EA6FF'
                                }
                            },
                            {
                                value: 60,
                                symbol: symbols[1],
                                itemStyle: {
                                    color: '#FF5959'
                                }
                            }
                        ],
                        markLine: markLineSetting,
                        z: 10
                    },
                    {
                        name: '总数',
                        type: 'pictorialBar',
                        symbolBoundingData: bodyMax,
                        animationDuration: 0,
                        // itemStyle: {
                        //   color: 'rgba(255,255,255,0.3)'
                        // },
                        data: [{
                            value: 100,
                            symbol: symbols[0],
                            itemStyle: {
                                color: 'rgba(0,228,255,0.1)'
                            }
                        }, {
                            value: 100,
                            symbol: symbols[1],
                            itemStyle: {
                                color: 'rgba(255,100,136,0.1)'
                            }
                        }]
                    }
                ]
            }
            myChart.setOption(option)
        }

        function drawLine6() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('myChart6'))
            // 绘制图表
            var option = {
                grid: [{
                    top: '8%',
                    left: '12%',
                    // width: '100%',
                    height: '95%'
                }],
                backgroundColor: '#fff',
                xAxis: [{
                        show: false
                    },
                    {
                        type: 'category',
                        boundaryGap: false,
                        splitNumber: 6,
                        // 坐标轴轴线相关设置。数学上的x轴
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(202,202,204,0.5)',
                                fontFamily: 'DIN-Medium'
                            }
                        },
                        // 坐标轴刻度标签的相关设置
                        axisLabel: {
                            textStyle: {
                                color: '#ccc',
                                fontFamily: 'DIN-Medium'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        data: [0, 4000, 8000, 120000, 160000, 20000]
                    }
                ],
                yAxis: [{
                    axisTick: 'none',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(202,202,204,0.5)',
                            fontFamily: 'DIN-Medium'
                        }
                    },
                    // offset:'20',
                    axisLabel: {
                        textStyle: {
                            color: '#999',
                            fontSize: '12'
                        }
                    },
                    data: cityDat
                }],
                series: [{
                    type: 'bar',
                    progressiveChunkMode: 'sequential',
                    data: dataNum,
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            distance: 10,
                            formatter: function (param, value) {
                                return param.value
                            },
                            textStyle: {
                                color: '#5B4CCD',
                                fontSize: '12',
                                fontFamily: 'DIN-Medium'
                            }
                        }
                    },
                    barWidth: 16,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                                offset: 0,
                                color: 'rgba(91,76,205,0)'
                            }, {
                                offset: 1,
                                color: 'rgba(91,76,205,0.6)'
                            }], false)
                        }
                    }

                }]
            }
            myChart.setOption(option)
        }
        drawLine5_1()
        drawLine5_2()
        drawLine6()
    </script>
</body>

</html>